<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     class="reftest-wait">
  <!-- Tests for rotate="auto" and "auto-reverse" -->
  <!-- The idea here is to create positioned red "holes" in the lime
       background, and then hopefully use paused <animateMotion> elements to
       position other elements exactly on top of the hole. -->
  <style>
    .background { fill:  lime   }
    .hole       { color: red    }
    .testBegin  { color: purple }
    .testEnd    { color: orange }
    .mask       { color: lime   }
  </style>
  <defs>
    <!-- A 'pin' marker, just offscreen, pointing directly down at 0,0 -->
    <!-- NOTE: The lime 2.83px-wide stroke is a hack to get around "seams" in
         SVG when redrawing the same non-pixel-aligned shape on top of itself
         in different colors. 2.83 is just over 2*sqrt(2), sqrt(2) being the
         maximum distance from a path that antialiasing of square pixels can
         cause the path to affect. -->
    <path id="marker" d="m0,0 l-10,-30  c-5,-20 25,-20 20,0 z"
          style="fill: currentColor; stroke: lime; stroke-width: 2.83px"/>
  </defs>
  <script xlink:href="../smil-util.js" type="text/javascript"/>
  <script type="text/javascript">
    function doTest() {
      setTimeAndSnapshot(101, true);
    }
    window.addEventListener("MozReftestInvalidate", doTest, false);
  </script>

  <!-- Big green background to match lime.svg -->
  <rect class="background" width="100%" height="100%" />
  <g transform="translate(50,50)">
    <!-- Here's the hole -->
    <use xlink:href="#marker" class="hole"
         transform="translate(20,20) rotate(45)"/>

    <!-- And here's a stack of elements animated with 'animateMotion' that
         should end up there. -->
    <use xlink:href="#marker" class="testBegin">
      <animateMotion from="20,20" to="40,40" rotate="auto" begin="101s" dur="1s"/>
    </use>
    <use xlink:href="#marker" class="testEnd">
      <animateMotion by="20,20" rotate="auto" begin="100" dur="1s" fill="freeze"/>
    </use>
    <use xlink:href="#marker" class="mask">
      <animateMotion by="40,40" rotate="auto" begin="100s" dur="2s"/>
    </use>
  </g>
</svg>
